<template>
    <div class="editor-slide">
        <div v-if="showEditor">
            <div class="mask" @click="onClose"></div>
            <div class="body">
                <div>
                    <FieldItem
                        v-for="(item, index) in proto"
                        :key="index"
                        :dataKey="index"
                        :item="item"
                        @update="onUpdateListItem"
                    />
                </div>

                <el-button class="btn-submit" type="primary" @click="onSubmit"
                    >提交</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
import FieldItem from "@/components/fieldItem/index2";
export default {
    components: {
        FieldItem
    },

    data() {
        return {
            showEditor: false,
            itemData: {},
            proto: {},
            index: 0
        };
    },
    methods: {
        startEdit(proto, index, value) {
            Object.keys(value).forEach(k => {
                proto[k].value = value[k];
            });
            this.proto = proto;
            this.itemData = value;
            this.index = index;
            console.log(this.proto);

            this.showEditor = true;
        },
        onUpdateListItem({ key, newValue }) {
            this.itemData[key] = newValue;
        },
        onSubmit() {
            this.$emit("update", {
                index: this.index,
                newValue: this.itemData
            });
            this.onClose();
        },
        onClose() {
            this.proto = {};
            this.itemData = {};
            this.showEditor = false;
        }
    }
};
</script>

<style scoped lang="less">
.editor-slide {
    font-size: 16px;

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 2021;
    }

    .body {
        padding: 30px 30px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        width: 700px;
        z-index: 2022;

        animation: showbody 0.4s;
    }

    .btn-submit {
        margin-top: 20px;
    }

    @keyframes showbody {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }
}
</style>
